import React, { useEffect, useRef } from 'react';
import { Form, Input, Modal, Select, Row, Col, DatePicker } from 'antd';
import { adminCompanyType, adminPriceType } from '@/utils/constant';

const FormItem = Form.Item;
const Detail = (props: any) => {
  const {
    visible,
    onCancel,
    onOk,
    getForm,
    loading,
    afterClose,
    editId,
  } = props;
  const [form] = Form.useForm();
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
      md: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
      md: { span: 18 },
    },
  };
  useEffect(() => {
    getForm(form);
  }, []);
  return (
    <Modal
      width={1024}
      afterClose={afterClose}
      destroyOnClose={true}
      confirmLoading={loading}
      title={editId !== undefined ? '编辑' : '新增'}
      visible={visible}
      onCancel={onCancel}
      onOk={onOk}
    >
      <Form hideRequiredMark style={{ marginTop: 8 }} form={form} name="basic">
        <Row gutter={12}>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请选择分类' }]}
              {...formItemLayout}
              label={'分类'}
              name="materialType"
            >
              <Select>
                <Select.Option value={'原料'}>原料</Select.Option>
                <Select.Option value={'边料'}>边料</Select.Option>
                <Select.Option value={'化工'}>化工</Select.Option>
                <Select.Option value={'配件'}>配件</Select.Option>
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入供应商' }]}
              {...formItemLayout}
              label={'供应商'}
              name="supplier"
            >
              <Input />
            </FormItem>
          </Col>

          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入品名' }]}
              {...formItemLayout}
              label={'品名'}
              name="productName"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入型号' }]}
              {...formItemLayout}
              label={'型号'}
              name="model"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem style={{ margin: 0 }} {...formItemLayout} label={'单价'}>
              <Input.Group compact>
                <FormItem
                  rules={[{ required: true, message: '请选择单价类型' }]}
                  style={{ width: '40%' }}
                  name="priceType"
                >
                  <Select style={{ width: '100%' }}>
                    {adminPriceType.map(item => (
                      <Select.Option key={item.value} value={item.value}>
                        {item.label}
                      </Select.Option>
                    ))}
                  </Select>
                </FormItem>
                <FormItem
                  rules={[{ required: true, message: '请输入价格' }]}
                  style={{ width: '60%' }}
                  name={'price'}
                >
                  <Input placeholder={'价格'} />
                </FormItem>
              </Input.Group>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入数量' }]}
              {...formItemLayout}
              label={'数量'}
              name="amount"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入剩余' }]}
              {...formItemLayout}
              label={'剩余'}
              name="surplus"
            >
              <Input />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
export default Detail;
